import React, { Suspense } from "react";
import { Layout, Button, Card, Divider } from "antd";
import Header from "@/layouts/Header";
import { connect } from "dva";

import logo from "../../assets/logo.png";
import styles from "./Home.less";

import moment from "moment";
import UserSession from "@/UserSession";
import { getIndexInfo } from "@/services/user";
import { getKnowledgeInfo, getDataStat, doHotQuestion } from "@/services/home";

import QaInfo from "./qaInfo";
import DataStatic from "./dataStatic";
import ChatStat from "./chatStat";

const { Content, Sider } = Layout;

class Home extends React.Component {
  state = {
    loading: false,
    info: {
      qaInfo: {},
      dialogInfo: {},
      atlasInfo: {}
    },
    fromDate: moment().subtract('7', 'days').format('YYYY-MM-DD'),
    toDate: moment().format('YYYY-MM-DD'),
    dataLoading: false,
    dataInfo: {
      visitNum: 0,
      questionNum: 0,
      answerRatio: '0',
      solveRatio: '0',
      transferRatio: '0'
    },
    questionTypeList: [],
    hotList: [],
    tableLoading: false,
    qaTotal: 0,
    total: 0
  };

  componentDidMount() {
    const currentUser = UserSession.getCurrentUser();
    if (!currentUser.username) {
      this.props.history.push("/user/login");
    };
    this.getInfo();
    this.getDataInfo();
    this.getHotList();
  }

  getInfo = () => {
    this.setState({ loading: true }, async () => {
      const res = await getKnowledgeInfo();
      this.setState({ info: res, loading: false });
    })
  }

  getDataInfo = () => {
    this.setState({ dataLoading: true }, async () => {
      const { fromDate, toDate } = this.state;
      const res = await getDataStat({ fromDate, toDate, applicationId: "0" });
      let sessionObj = {
        x: res.visit.spread.map(item => item.x),
        y: res.visit.spread.map(item => item.y),
      };
      let transferObj = {
        x: res.transferLabor.spread.map(item => item.x),
        y: res.transferLabor.spread.map(item => item.y),
      };
      let questionTypeList = [];
      let qaTotal = 0;
      for (const item of res.questionType) {
        questionTypeList.push({ value: item.y, name: item.x });
        qaTotal += item.y;
      };
      this.setState({
        dataLoading: false,
        dataInfo: {
          visitNum: res.visit.num,
          questionNum: res.question.num,
          answerRatio: res.answerRatio,
          solveRatio: res.solveRatio,
          transferRatio: res.transferRatio
        },
        questionTypeList,
        qaTotal,
      }, () => {
        this.ChatStat.sessionMain(sessionObj)
        this.ChatStat.transferMain(transferObj)
        this.ChatStat.pieMain(questionTypeList)
      })
    })
  }

  changeDate = value => {
    this.setState({ fromDate: value[0].format('YYYY-MM-DD'), toDate: value[1].format('YYYY-MM-DD') }, () => {
      this.getDataInfo();
      this.getHotList();
    })
  }

  getHotList = () => {
    this.setState({ tableLoading: true }, async () => {
      const { fromDate, toDate } = this.state;
      const res = await doHotQuestion({ fromDate, toDate, applicationId: "0" });
      this.setState({ hotList: res, total: res.total });
    })
  }

  render() {
    const { currentUser: { username, validity, reviewStatus, overdue }, } = this.props;
    const { posts, info, loading, dataLoading, dataInfo, fromDate, toDate, sessionStat, questionTypeList, hotList, qaTotal, total } = this.state;

    return (
      <div className={styles.homeLayoutBox}>
        <Layout style={{ minHeight: "100vh" }}>
          <Header logo={logo} isHome={true} />
          <Content className={styles.content}>
            <QaInfo info={info} loading={loading} />
            <DataStatic fromDate={fromDate} toDate={toDate} loading={dataLoading} changeDate={this.changeDate} dataInfo={dataInfo} />
            <ChatStat loading={dataLoading} onRef={ref => this.ChatStat = ref} questionTypeList={questionTypeList} hotList={hotList} qaTotal={qaTotal} total={total} />
          </Content>
        </Layout>
      </div>
    );
  }
}

export default connect(({ user }) => ({
  currentUser: user.currentUser,
}))(Home);
